<style type="text/css" media="all" >
.userContent{
   background-color: rgba(10,10,34,0.9);
   border: 1px solid transparent;
   border-radius: 5px;
   box-shadow: 3px 3px 3px #ccc; 
   -webkit-box-shadow: 3px 3px 3px #ccc;
   -o-box-shadow: 3px 3px 3px #ccc;
   -moz-box-shadow: 3px 3px 3px #ccc;
   width: 250px;
   z-index: 1000;
}
.userImgContent{
   width: 60px;
   height:60px;
   margin: 10px 10px 20px 25px
}
/*li{
   color:#0033FF;
}
span{
   color:white;
}*/
.userContent1S,.userContent2S li{
   color:#4169E1;
}
.userContent span{
   color:white;
}
.userContent1S ,.userContent2S{
   list-style-type: none;
   padding: 0px 0px 0px 10px;
   line-height: 20px;
   margin: 0px
}
.userContent1S{
   padding-top: 10px;
   display: inline-block;
}
.userContent2S{
   padding-bottom: 10px
}
.userImg,.userContent1{
   display: inline-block;
}

.userImg{
position: absolute;
left: 60%;
top: 0%;
}
   #commonContentMasker{
      z-index: 998;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,0);
      display: none
   }
</style>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="userContent" id="userInfoContent">
   <div></div>
   <div class="userContent1">
      <ul class="userContent1S">
      <li>用户：<span class="userName"></span>  </li>
      <li>性别：<span class="userSex"></span>  </li>
      <li>来自：<span class="userFrom"> <span class="userFromCity"></span></span></li>
      <li>加入时间：<span class="userJoin"></span></li>
      </ul>
      
   </div>

   <div class="userContent2">
      <ul class="userContent2S">
         <li>开发平台：<span class="userPlatform"></span></li>
         <li>专长领域：<span class="userSpeciality"></span></li>
         <li>最近登录：<span class="userLoginTime"></span></li>
      </ul>
   </div>
   <div class="userImg"><img src="" alt="" class="userImgContent"></div> 
</div>

<div id="commonContentMasker"></div>